<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	interface RouteParams {
		id : string,
		name : string,
		receive_money : string
		balance : string
		should_payment : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: '',
		receive_money: '',
		balance: '',
		should_payment: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
	})
	// 欠款金额
	const toStoreDetail = () => {
		route({
			url: '/package_dealer/pages/Repayment/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				receive_money: routeParams.value.receive_money
			}
		})
	}
	// 预存款
	const toStore = () => {
		route({
			url: '/package_dealer/pages/Received/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				balance: routeParams.value.balance
			}
		})
	}
	// 账期结款
	const storeDetail = () => {
		route({
			url: '/package_dealer/pages/AccountPeriod/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				receive_money: routeParams.value.receive_money
			}
		})
	}
</script>

<template>
	<view class="content">
		<up-navbar :title="routeParams.name" autoBack placeholder></up-navbar>
		<view class="content-header">
			<view class="header-name">{{routeParams.name}}</view>
			<!-- <view class="header-text">账期：2024/12/31</view> -->
			<view class="header-line"></view>
			<view class="header-foot">
				<view class="foot-box">
					<view class="foot-name">预存金额</view>
					<view class="foot-text">{{routeParams.balance}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">欠款金额</view>
					<view class="foot-text">{{routeParams.receive_money}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">账期欠款</view>
					<view class="foot-text">{{routeParams.should_payment}}</view>
				</view>
				<view class="foot-box">
					<view class="foot-name">应收金额</view>
					<view class="foot-text">{{routeParams.receive_money}}</view>
				</view>
			</view>
		</view>
		<view class="content-main">
			<view class="main-header">月汇总明细</view>
			<view class="main-footer">
				<view class="footer-right" @click="toStoreDetail()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home2.png">
						</image>
					</view>
					<text class="right-name">欠款金额</text>
				</view>
				<view class="footer-right" @click="toStore()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home3.png">
						</image>
					</view>
					<text class="right-name">预存款</text>
				</view>
				<view class="footer-right" @click="storeDetail()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home4.png">
						</image>
					</view>
					<text class="right-name">账期结款</text>
				</view>
			</view>
		</view>
	</view>
</template>


<style scoped lang="scss">
	.content {
		width: 100%;
		// height: 100vh;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;

		.content-header {
			width: 702rpx;
			height: 266rpx;
			border-radius: 12rpx;
			background: rgba(54, 116, 242, 1);
			margin: 0rpx auto;
			padding: 30rpx;
			box-sizing: border-box;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(241, 245, 249, 1);
			}

			.header-text {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.85);
				margin-top: 20rpx;
			}

			.header-line {
				width: 658rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.1);
				margin: 20rpx 0rpx;
			}

			.header-foot {
				display: flex;
				justify-content: space-between;

				.foot-box {
					.foot-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}

					.foot-text {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(255, 255, 255, 1);
						margin-top: 10rpx;
					}
				}
			}
		}

		.content-main {
			width: 100%;
			height: calc(100vh - 500rpx);
			background: rgba(255, 255, 255, 1);
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.main-header {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.main-footer {
				width: 702rpx;
				position: fixed;
				bottom: 80rpx;
				display: flex;
				justify-content: space-between;

				.footer-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 218rpx;
					height: 80rpx;
					border-radius: 12rpx;
					background: rgba(245, 245, 245, 1);
					margin-right: 20rpx;

					.right-img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(55, 131, 252, 1);
					}
				}

			}
		}
	}
</style>